<template>
  <div class="collapse">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item v-for="(item,index) in data" :key="index" :title="item.title" :name="index">
        <div class="label" v-for="(i,index) in item.content" :key="index">{{ i }}</div>
<!--        <el-tag v-for="(i,index) in item.content" :key="index">{{ i }}</el-tag>-->
<!--        {{ item.content }}-->
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: '0',
      data:[{title:'封闭式搭配（2021冬搭配）',content:['长款外套：高级、保暖','拖地裤：时尚、显瘦、显高、适合腿长、搭配乐福鞋或小白鞋','短袜：保暖、时髦','长裤+短靴：性感、大气','顺色系搭配：酷帅时髦','九分裤+短袜：黑色短袜搭配牛仔直筒裤','短靴+九分裤','九分裤挽起裤脚：显高、有层次']},
        {title:'40+女性穿搭（2021）',content:['日系通勤风格：简约文雅','高腰裙、高腰裤：上衣塞进裙子或裤子里以提高腰线','上短下长搭配原则：拉长比例、高挑','修身但有空间感','简单经典款式：针织衫、白色衬衣、烟管裤、牛仔裤','穿搭柔和感：栗子发色','选择天然材质，如真丝、羊绒、棉麻等：高级']},
        {title:'2020流行色',content:['经典蓝色：蓝色调的裙装、西装外套、裤装','高级灰']},
        {title:'暖橘色',content:['暖橘色墨镜','黑白小格纹西装搭配橘色连衣裙内搭','扎染卫衣搭配暖橘色贝雷帽','碎花打底衫搭配暖橘色大衣','暖橘色+白色搭配：橘色卫衣搭配白色直筒裤','橘色+牛仔蓝色：暖橘色搭配牛仔外套','暖橘色上衣+黑色裤子']},
        {title:'2020流行秋冬流行单品',content:['复古格纹外套：搭配纯色背心、衬衣、小高领','皮革','廓形外套搭配轻薄内搭','动物纹：野性的豹纹、抽象的斑马纹、妩媚的蟒蛇纹','中裤','工装风','慵懒风：及地裤子+高腰线','中筒靴','不对称设计','贝雷帽']},
        {title:'运动风',content:['卫衣搭配西装裤','运动上衣搭配休闲裤','太空棉和皮料拼接','衬衫搭配运动马甲和短裤，脚蹬运动板鞋']},
        {title:'夏空气衫',content:['雪纺空气衫搭配小吊带','纯色空气衫','空气衫','低饱和的莫兰迪色搭配同色','碎花空气衫搭配白色背心','雏菊或油画空气衫搭配黑色背心','蝴蝶风空气衫搭配爸爸裤、短裤','扎染空气衫搭配白色T恤']},
        {title:'优雅的“莽夫”',content:['黑白条纹西装','红蓝条纹夹克和棒球外套','海军服搭配条纹裤','线条优雅的条纹西装','棒球领的条纹夹克','条纹围巾']},
        {title:'牛仔裤型格',content:['补丁牛仔上衣搭配补丁牛仔裤','作旧牛仔裤搭配小面积鲜亮上衣','挽起牛仔裤裤脚','牛仔裤剪出毛边搭配叫上带子、船鞋','牛仔裤搭配板鞋、彩色条纹袜子','蓝色复古牛仔裤搭配浅蓝色衬衫']},
        {title:'男士夏季时髦关键词',content:['垂坠感背心','皮革质地：有孔鹿皮、亮丽牛皮、有孔小牛皮、超软水洗小羊皮','丝质衬衣：质地薄透，搭配背心','拼接长裤：以条纹或格子印花点缀，注意窄脚和双缝褶','连体衣：工装连体衣','亮色短裤搭配素色上衣']},
        {title:'男装女穿',content:['工装连体裤搭配毛线帽、短靴、学院包','飞行员夹克遵循“上宽下窄”的搭配原则','带帽卫衣','宽条纹廓形大衣','男士礼帽搭配西装马甲和皮手套']},
        {title:'格纹',content:['彩色复古格纹','格纹西装搭配百褶裙','橘色格纹与冷色调组合','亮色上装点缀米色文半裙','格纹阔腿裤打破沉闷无趣','格纹配饰','格纹渔夫帽','小香风适合甜美风姐妹']}],
    };
  }
}
</script>

<style scoped>
/*.collapse >>> .el-collapse{*/
/*  background-color: rgba(0,0,0,0)!important;*/
/*  width: 100%;*/
/*  color: rgba(0,0,0,0)!important;*/
/*}*/
.label{
  border: 1px solid white;
  padding-right: 5px;
  display: inline-block;
  margin: 2px;
  border-radius: 5px;
}
.el-collapse{
  border-top: 1px solid #eaecf1!important;
  border-bottom: 1px solid #eaecf1!important;
  /*border-top: 1px solid #0e94ea!important;*/
  /*border-bottom: 1px solid #0e94ea!important;*/
  /*border: none;*/
  margin: 0 1.5rem 0 0;
  overflow: scroll;
  max-height: 200px;
  overflow-x:hidden;
}
.el-collapse::-webkit-scrollbar {
  width: 8px;
}
.el-collapse::-webkit-scrollbar-thumb {
  background-color: #eaecf1;
  border-radius: 3px;
}
.el-collapse >>>.el-collapse-item{
  background-color: rgba(0,0,0,0)!important;
  color: white!important;
}
.el-collapse-item >>>.el-collapse-item__header{
  background-color: rgba(0,0,0,0)!important;
  color: white!important;
  border-bottom: 1px solid #0e94ea !important;
  height: 2rem;
  line-height: 2rem;
  padding-left: 0.5rem;
}
.el-collapse-item >>>.el-collapse-item__wrap{
  background-color: rgba(0,0,0,0)!important;
  color: white!important;
  border-bottom: 1px solid #0e94ea !important;
  padding-left: 1rem;
  overflow: hidden;
}
.el-collapse >>>.el-collapse-item__content{
  color: white!important;
  padding-bottom: 0.5rem!important;
}
</style>
